/* 拖拽验证部分 */
let slide = document.getElementById('slide');
let slideBox = document.getElementById('slideBox');
let slideText = document.getElementById('slideText');
let bgc = document.getElementById('bgc');
let changeX = null; // 滑块移动的距离
let isSlideSuccess = false; // 判断拖拽验证是否完成
let isPhone = false; // 判断当前是学号登录还是手机号登录
let formMsg = document.getElementById('formMsg'); // 表单错误信息提示栏
/*
	功能：还原表单错误信息提示栏
*/
function resetFormMsg() {
	formMsg.style.opacity = 0;
	formMsg.children[0].innerText = '';
}
/*
	功能：设置表单错误信息提示栏的文本
	参数：要显示的文本内容
*/
function setFormMsg(value) {
	formMsg.style.opacity = 1;
	formMsg.children[0].innerText = value;
}
/*
	功能：当选择学号登录时重置拖拽验证滑块样式
*/
function resetSlide() {
	if(!isPhone) {
		slide.onmousedown = onMouseDownEvent;
		slide.innerText = '>>';
		slideText.innerText = '请按住滑块，拖动到最右边';
		slideText.style.color = '#555';
		slide.style.borderLeft = '1px solid #ccc';
		slide.style.left = 0;
		bgc.style.width = 0;
		isSlideSuccess = false;
	}
}
/*
	功能：slide的onmousedown事件
*/
function onMouseDownEvent(e) {
	let initX = e.clientX;
	let maxLength = slideBox.clientWidth - slide.clientWidth;
	document.onmousemove = function(e) {
		// 取消过渡效果
		slide.style.transition = '';
		bgc.style.transition = '';
		let moveX = e.clientX;
		changeX = moveX - initX;
		if(changeX <= 0) {
			changeX = 0;
		} else if(changeX >= maxLength) {
			changeX = maxLength;
			document.onmousemove = null;
			slide.onmousedown = null;
			slide.innerText = '√';
			slideText.innerText = '验证通过';
			slideText.style.color = '#fff';
			slide.style.borderLeft = 'none';
			isSlideSuccess = true;
		}
		slide.style.left = changeX + 'px';
		bgc.style.width = changeX + 'px';

	}
	document.onmouseup = function() {
		document.onmousemove = null
		if(changeX < maxLength){
			// 设置过渡效果
			slide.style.transition = 'all 500ms ease-in-out';
			bgc.style.transition = 'all 500ms ease-in-out';
			slide.style.left = 0;
			bgc.style.width = 0;
		}
	}
}
slide.onmousedown = onMouseDownEvent;

/* 选择学号登录还是手机号登录部分 */
let loginSno = document.getElementById('loginSno');
let loginPhone = document.getElementById('loginPhone');
let formSno = document.getElementById('formSno');
let formPhone = document.getElementById('formPhone');
let wtBar = document.getElementById('wtBar');
let formItemPwd = document.getElementById('formItemPwd');
function loginSnoClick() {
	formPhone.style.display = 'none';
	formSno.style.display = 'block';
	loginSno.style.color = '#e4393c';
	loginPhone.style.color = '#666';
	wtBar.style.left = '47px';
	wtBar.style.width = '74px';
	resetFormMsg();
	let box = formItemPwd.parentNode;
	box.style.backgroundPosition = '-48px -48px';
	box.style.borderColor = '#bdbdbd';
	formItemPwd.style.borderColor = '#bdbdbd';
	isPhone = false;
	resetSlide();
}
loginSno.onclick = loginSnoClick;
/* 没做手机号登录
 loginPhone.onclick = function() {
 	formSno.style.display = 'none';
 	formPhone.style.display = 'block';
 	loginSno.style.color = '#666';
 	loginPhone.style.color = '#e4393c';
 	wtBar.style.left = '210px';
 	wtBar.style.width = '91px';
 	resetFormMsg();
 	isPhone = true;
 }
*/

/* 设置输入框相关事件 */

/*
	功能：设置tip图标显示和点击事件
	第一个参数：要显示的tip元素
	第二个参数：若为true，则点击后tip的上一个兄弟元素文本清空
*/
function setTipVisible(tipElement, flag) {
	tipElement.style.display = 'block';
	if(flag) {
		tipElement.onclick = function() {
			tipElement.previousElementSibling.value = '';
			setTipHiden(tipElement);
		}
	}
}
/*
	隐藏tip图标
*/
function setTipHiden(tipElement) {
	tipElement.style.display = 'none';
}
/*
	动态显示和隐藏tip图标
*/
function setTipEvent(tipElement) {
	let value = tipElement.previousElementSibling.value;
	if(value != null && value.length != 0) {
		setTipVisible(tipElement, true);
	} else {
		setTipHiden(tipElement);
	}
}
let formItemSno = document.getElementById('formItemSno');
let formItemPhone = document.getElementById('formItemPhone');
let formItemVC = document.getElementById('formItemVC');
formItemSno.onfocus = function() {
	let box = this.parentNode;
	box.style.backgroundPosition = '0 -48px';
	box.style.borderColor = '#bdbdbd';
	this.style.borderColor = '#bdbdbd';
}
formItemSno.onblur = function() {
	this.parentNode.style.backgroundPosition = '0 0';
}
formItemPwd.onfocus = function() {
	let box = this.parentNode;
	box.style.backgroundPosition = '-48px -48px';
	box.style.borderColor = '#bdbdbd';
	this.style.borderColor = '#bdbdbd';
}
formItemPwd.onblur = function() {
	this.parentNode.style.backgroundPosition = '-48px 0';
}
formItemSno.oninput = function() {
	setTipEvent(this.nextElementSibling);
}
formItemPwd.oninput = function() {
	setTipEvent(this.nextElementSibling);
}
let regExp = /^1[345678]\d{9}$/;
formItemPhone.oninput = function() {
	let value = this.value;
	if(value == null || value.length == 0) {
		resetFormMsg();
		setTipHiden(this.nextElementSibling);
	} else {
		if(regExp.test(value)) {
			setTipEvent(this.nextElementSibling);
			resetFormMsg();
		} else {
			setTipHiden(this.nextElementSibling);
		}
	}
}
formItemPhone.onblur = function() {
	let value = this.value;
	if(value == null || value.length == 0) {
		setTipHiden(this.nextElementSibling);
		setFormMsg('请输入手机号');
	} else {
		if(regExp.test(value)) {
			setTipEvent(this.nextElementSibling);
			resetFormMsg();
		} else {
			setTipHiden(this.nextElementSibling);
			setFormMsg('输入的手机号有误');
		}
	}
}
/* 点击登录时 */
function setFormItemErrorStyle(element) {
	if(!element) {
		formItemSno.parentNode.style.backgroundPosition = '0 -96px';
		formItemPwd.parentNode.style.backgroundPosition = '-48px -96px';
		formItemSno.style.borderColor = '#e4393c';
		formItemPwd.style.borderColor = '#e4393c';
		formItemSno.parentNode.style.borderColor = '#e4393c';
		formItemPwd.parentNode.style.borderColor = '#e4393c';
		formItemSno.focus();
	} else {
		let box = element.parentNode;
		box.style.borderColor = '#e4393c';
		element.style.borderColor = '#e4393c';
		if(element.id == 'formItemSno') {
			box.style.backgroundPosition = '0 -96px';	
		} else if(element.id == 'formItemPwd') {
			box.style.backgroundPosition = '-48px -96px';
		}
		element.focus();
	}
}
let agreement = document.getElementById('agreement');
let label = agreement.children[0];
function checkForm() {
	if(!isPhone) {
		// 学号登录
		let snoValue = formItemSno.value;
		let pwdValue = formItemPwd.value;
		if(snoValue.trim().length == 0 && pwdValue.trim().length == 0) {
			setFormMsg('请输入学号和密码');
			setFormItemErrorStyle();
			return false;
		} else if(snoValue.length == 0) {
			setFormMsg('请输入学号');
			setFormItemErrorStyle(formItemSno);
			return false;
		} else if(pwdValue.length == 0) {
			setFormMsg('请输入密码');
			setFormItemErrorStyle(formItemPwd);
			return false;
		} else if(!isSlideSuccess){
			setFormMsg('请进行拖拽验证');
			return false;
		} else if(!/^[1-9]\d{12}$/.test(snoValue)) {
			setFormMsg('学号输入有误');
			return false;
		}
		let snoPhone = document.getElementById('snoPhone');
		// 显示等待图片
		let mask = document.getElementById('mask');
		mask.style.display = 'block';
		mask.innerHTML = `<div class="mask-wrap" style="position: absolute; top: 50%; left: 50%; margin-top: -25px;margin-left: -25px;width: 50px;height: 50px;background: url(/images/loading2.gif) no-repeat;background-size: 50px;">
						  </div>`;
		ajax({
			type: 'POST',
			url: '/user/loginBySno',
			async: true,
			data: {
				sno: snoValue,
				pwd: hex_md5(pwdValue),
				phone: snoPhone.value
			},
			success: function(xhr) {
				removeAllChildren(mask);
				mask.style.display = 'none';
				let arg = JSON.parse(xhr.responseText);
				if(arg.code == 200 && arg.message == 'success') {
					resetFormMsg();
					location.assign("");
				} else if(arg.code == 3010) {
					// 用户名或密码不正确
					// 重置样式
					loginSnoClick();
					formItemSno.value = snoValue;
					formItemPwd.value = '';
					setTipEvent(formItemPwd.nextElementSibling)
					setFormMsg(arg.message);
				} else {
					// 非法登录或其他
					location.replace("/page/error500.html");
				}
			}
		});
		return false;
	} else {
		// 手机号登录
		// 检查用户有没有同意服务条款
		let agreeImg = label.children[0];
		if(agreeImg.style.display == 'none') {
			label.parentNode.children[4].style.display = 'block';
			return false;
		}
		// 检验手机号和验证码
		let phoneValue = formItemPhone.value;
		if(!regExp.test(phoneValue)) {
			formItemPhone.focus();
			formItemPhone.blur();
			return false;
		}
		// 比较验证码是否相等
	}
}
label.onclick = function() {
	let agreeImg = this.children[0];
	let disagreeImg = this.children[1];
	if(agreeImg.style.display == 'inline-block') {
		agreeImg.style.display = 'none';
		disagreeImg.style.display = 'inline-block';
	} else {
		agreeImg.style.display = 'inline-block';
		disagreeImg.style.display = 'none';
		let agreementTip = this.parentNode.children[4];
		if(agreementTip.style.display == 'block') {
			agreementTip.style.display = 'none';
		}
	
	}
}
let arrowDown = label.nextElementSibling;
let arrowUp = arrowDown.nextElementSibling;
let agreementContent = arrowUp.nextElementSibling;
arrowDown.onclick = function() {
	agreementContent.style.visibility = 'visible';
	agreementContent.style.opacity = 1;
	this.style.display = 'none';
	arrowUp.style.display = 'inline-block';
}
arrowUp.onclick = function() {
	agreementContent.style.visibility = 'hidden';
	agreementContent.style.opacity = 0;
	this.style.display = 'none';
	arrowDown.style.display = 'inline-block';
}
